<template>
	<view class="address-item" :class="{ act: isAct }" @click="itemClick">
		<image class="edit-btn" v-if="isShowEdit" @click="editBtnClick" :src="isAct ? '/static/bianji-act.png' : '/static/bianji1.png'" mode=""></image>
		<view style="margin-bottom: 20rpx;">
			<text class="name">{{ userName }}</text>
			<text class="phone">{{ phone }}</text>
			<text v-if="isDefault" class="default-sign">默认</text>
		</view>
		<text class="address-text">{{ address }}</text>
	</view>
</template>

<script>
export default {
	props: {
		userName: {
			//名称
			type: String,
			default: ''
		},
		phone: {
			//电话
			type: String,
			default: ''
		},
		address: {
			//地址
			type: String,
			default: ''
		},
		isDefault: {
			//是否是默认地址
			type: Boolean,
			default: false
		},
		isShowEdit: {
			//是否显示编辑按钮
			type: Boolean,
			default: true
		},
		isAct: {
			//是否在当前选中
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isEdit: false //是否编辑
		};
	},
	methods: {
		itemClick(event) {
			this.$emit('click', event);
		},
		editBtnClick() {
			// 编辑按钮点击
			// console.log('编辑按钮点击');
			this.isEdit = !this.isEdit;
			this.$emit('editBtnClick', this.isEdit);
		}
	}
};
</script>

<style lang="scss">
.address-item {
	width: 100%;
	box-sizing: border-box;
	padding: 25rpx;
	background-color: #fff;
	border-radius: 8px;
	position: relative;
	.edit-btn {
		width: 36rpx;
		height: 36rpx;
		padding: 20rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}
	.name {
		margin-right: 20rpx;
		color: #46494d;
		font-size: 34rpx;
	}
	.phone {
		margin-right: 20rpx;
		color: #46494d;
		font-size: 34rpx;
	}
	.default-sign {
		font-size: 24rpx;
		background-color: #ff6106;
		color: #fff;
		border-radius: 4px;
		padding: 2rpx 14rpx;
	}
	.address-text {
		color: #46494d;
		font-size: 34rpx;
	}
}
.address-item.act {
	background-color: #e9c846;
	
	.name {
		color: #ffffff;
	}
	.phone {
		color: #ffffff;
	}

	.address-text {
		color: #ffffff;
	}
}
</style>
